<template>
  <!-- 自动生成游戏内容  主图 生成首图 生成详情图 -->
  <div class="make-img-page  radius">
    <div class="game-box flex radius">
      <div class="font16 bold" style="flex-shrink:0;line-height:30px">选择游戏：</div>
      <selectBtnVue
        :options="{
          valueKey: 'id',
          labelKey: 'name',
          itemWidth: '100px',
          limitShow: '5',
          disabled:false
        }"
        :list-data="gameList"
        :selected="currentGame.id"
        @change="tabChange"
      ></selectBtnVue>
    </div>
    <div class="release-page" >
      <releaseTool
        :gameItem="currentGame"
        :formData="formData"
        type="tool"
        ref="releaseTool"
      ></releaseTool>
    </div>
  </div>
</template>

<script>
// import releaseTool from "../../goodsManage/goodsList/releaseTool.vue"
import gameListApi from "@/api/gameConfig/gameList";
import selectBtnVue from "../../components/select-btn.vue";
export default {
  name: "makeImgPage",
  components: { selectBtnVue},
  data() {
    return {
      gameList:[],
      currentGame:{},
      formData:{}
    };
  },
  created() {
    this.getGameList();
  },
  activated() {},
  methods: {
    // tabs切换时触发
    tabChange(e, item) {
      //console.log("%c Line:51 🍎 item", "color:#e41a6a", item);
      this.currentGame = item;
      this.formData = {
          gameId: this.currentGame.id,
          gameType: this.currentGame.type,
          gameName: this.currentGame.name
        }
    },
   // 游戏列表
   async getGameList() {
      let res = await gameListApi.getGameList();
      // //console.log("%c Line:278 🍫 res", "color:#465975", res);
      this.gameList = res.rows;
      if (res.rows && res.rows.length) {
        this.currentGame = res.rows[0];
        this.formData = {
          gameId: this.currentGame.id,
          gameType: this.currentGame.type,
          gameName: this.currentGame.name
        }
      }
    },
  },
};
</script>
<style lang="scss" scoped>
.make-img-page{
  margin-top: 16px;
  height: calc(100vh - 115px);
  overflow: auto;
  .game-box{
    padding: 20px;
    background-color: $fff;
  }
}
</style>